<!DOCTYPE html>
<script src="../../../../resources/js-test.js"></script>
<link rel="stylesheet" href="../resources/touch-hover-active-tests.css">
<style type="text/css">
#box {
    height: 200px;
    width: 200px;
}

#over {
    z-index: 9000;
    position: absolute;
    top: -50px;
    left: -50px;
}

#frame {
    width: 400px;
    height: 400px;
    z-index: -1;
    position: absolute;
    visibility: hidden;
    left: 0;
    top: 0;
}
</style>
<div id="box" class="touch-interactive">Gestures go here</div>
<div id="over">
    <iframe id="frame"></iframe>
</div>

<p id="description"></p>
<div id="console"></div>

<script src="../resources/touch-hover-active-tests.js"></script>
<script>
var box = document.getElementById("box");
description("Tests that tap gesture events on a an element covered by a hidden iframe set and clear the active state.");

window.jsTestIsAsync = true;

function runTests()
{
    if (!window.eventSender) {
        debug("This test requires DRT.");
        return;
    }

    if (!eventSender.gestureShowPress) {
        debug("GestureShowPress is not supported by this platform");
        return;
    }

    debug("Verify active isn't initially set");
    shouldBeDefault("getHoverActiveState(box)");

    debug("Verify showPress, tap sets and clears active");
    eventSender.gestureTapDown(50, 50);
    eventSender.gestureShowPress(50, 50);
    shouldBeHoveredAndActive("getHoverActiveState(box)");
    eventSender.gestureTap(50, 50);
    waitUntilActiveCleared();
}

function waitUntilActiveCleared()
{
    if (getHoverActiveState(box) == "hoveredAndActive") {
        return setTimeout(waitUntilActiveCleared, 10);
    }

    shouldBeOnlyHovered("getHoverActiveState(box)");

    finishJSTest();
}

window.onload = runTests;
</script>
